html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    display: grid;
    grid-template-columns: 500px 250px 250px;
    grid-template-rows: auto;
}
.box .l{
    display: grid;
    grid-template-rows: 50px repeat(6,30px);
}
.box .t{
    margin: 10px;
    border: #000;
    font-size: 20px;
    line-height: 50px;
}
.box .l li {
    display: grid;
    grid-template-columns: 3fr 1fr;
}
.box .l li .l1{
    font-size: 15px;
}
.box .l li .r1{
    float: right;
    font-size: 15px;
    color: gray;
}
.box .m{
    background-color: silver;
    display: grid;
    grid-template-rows: 50px 70px 70px;
}
.box .m1{
    margin: 20px;
    font-size: 15px;
}
.box .m2{
    margin: 20px;
    color: gray;
    font-size: 15px;
}
.box .r{
    display: grid;
    grid-template-rows: 50px auto;
}
.box .b{
    font-size: 15px;
    margin: 20px;
}
.box2{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
}
.box2 .b{
    display: grid;
    grid-template-rows: 3fr 1fr;
}
.box2 img{
    margin: 20px;
}
.box2 .b1{
    margin: 3px;
    font-size: 15px;
}
.box3{
    display: grid;
    grid-template-columns: 150px 200px 150px 200px 300px;
    grid-template-rows: 50px repeat(5,30px);
}
.box3 .t{
    height: 30px;
    margin: 20px;
    border-bottom: 1px solid gray;
}
.box3 .t1{
    grid-column: span 3;
    height: 30px;
    margin: 20px;
    border-bottom: 1px solid gray;
}
.box3 .td{
    display: block;
    margin: 10px;
}
.box3 .timg{
    margin: 5px;
    grid-row: span 5;
}
.box4{
    display: grid;
    grid-template-columns: 300px 100px 600px;
}
.box4 .td{
    font-size: 12px;
    margin: 20px;
}
input{
    background-color: #F5F5F5FF;
    background-image: url('./images/9942CBE6D63398A89D58B2415C6A78CD.png');
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px;
    width: 150px;
    border: 2px solid gray;
    border-radius: 3px;
}